<style>
    .el-upload-list__item-status-label {
        float: none !important;
        padding: 0 !important;
    }
</style>

<div id='upload_{{ widget.name }}'>
    <input type="hidden" name="{{ widget.name }}" :value="fileURL"/>
    <el-upload
            {% if widget.is_disabled %}
                disabled
            {% endif %}
                :multiple="is_multiple"
                :limit="limit"
                :on-exceed="handleExceed"
                action="/storage/upload_one/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleSuccess"
                :on-error="handleError"
                :on-remove="handleRemove"
                :before-upload="handleBeforeUpload"
                :data="data"
                name="file_obj"
                :file-list="fileList"
    >
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#upload_{{ widget.name }}',
        data: {
            dialogImageUrl: '',
            dialogVisible: false,
            is_multiple: false,
            fileList: {{ widget.file_list | safe}},
            fileURL: {% if widget.value %}'{{ widget.value }}'{% else %}''{% endif %},
            limit: 1,
            data: {
                csrfmiddlewaretoken: "",
                width: 0,
                height: 0,
                aspect_ratio: 0,
                size: 0,
                save_model: 1,
                suffix: 'jpg',
                name: ''
            }
        },
        mounted() {
            if (this.fileList.length > 0) {
                this.hidden_push()
            }
        }
        ,
        methods: {
            handleRemove(file, fileList) {
                this.fileURL = "";
                this.show_push()
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`只能选择${this.limit}张图片`);
            },
            handleSuccess(response, file, fileList) {
                if (response.code === 0) {
                    this.$message.warning(response.msg);
                } else {
                    this.fileURL = response.data.url;
                    this.hidden_push();
                }
            }, handleError(error, file, fileList) {
                console.log(error, file);
                this.$message.warning('致命发生错误！');
            },
            async handleBeforeUpload(file) {
                let img = await this.getImageInfo(file)
                this.data.width = img.width
                this.data.height = img.height
                this.data.aspect_ratio = img.width / img.height
                this.data.size = file.size
                this.data.name = file.name
                this.data.suffix = file.name.split('.').pop() | 'jpg'
                this.data.csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val();
            }
            , getImageInfo(file) {
                return new Promise((resolve, reject) => {
                    let reader = new FileReader()
                    reader.onload = (e) => {
                        let data = e.target.result
                        let img = new Image()
                        img.src = data
                        img.onload = () => {
                            resolve({
                                width: img.width,
                                height: img.height,
                                aspect_ratio: img.width / img.height,
                            })
                        }
                    };
                    reader.readAsDataURL(file)
                })
            }, hidden_push() {
                $("#upload_{{ widget.name }} .el-upload--picture-card").hide()
            }, show_push() {
                $("#upload_{{ widget.name }} .el-upload--picture-card").show()

            }
        }
    })


</script>